<template>
  <div>
    <button @click="handle">变</button>
    <btn :isShow="flag"></btn>
    <hr>
    <div class="img1">cover</div>
    <div class="img2">contain</div>
    <div class="img3"></div>
  </div>
</template>

<script>
import btn from '../components/btn.vue'
export default {
  name: 'seven',
  components: {btn},
  data () {
    return {
      flag: false,
    }
  },
  methods: {
    handle () {
      this.flag = !this.flag
    }
  }
  

}
</script>

<style lang="scss" scoped>
.img1 {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  background: url("../assets/120.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}
.img2 {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  background: url("../assets/120.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
}
.img3 {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  background: url("../assets/120.jpeg");
  background-repeat: no-repeat;
}
</style>